<template>
	<!-- <view class="fog"></view> -->
	<view :class="{fog : shuaixuandialog}"></view>
	<view class="container">
		<view class="title" :style="{ marginTop: safeTop + 'px'}">我的玩具库</view>
		<view class="zichan">
			<view class="zi-view">
				<view class="zi-title">我的玩具总资产</view>
				<view class="zi-all">
					<view class="zi-flag">¥</view>
					<view class="zi-num">5552</view>
				</view>
			</view>
		</view>
		<view class="se">
			<view class="se-left">

				<view class="button" :class="{'select' : curryType === 0}" @tap="selectType(0)">
					<text class="text">全部</text>
				</view>
				<view class="button" :class="{'select' : curryType === 1}" @tap="selectType(1)">
					<text class="text">已预定</text>
				</view>
				<view class="button" :class="{'select' : curryType === 2}" @tap="selectType(2)">
					<text class="text chao">已补款</text>
				</view>

			</view>
			<view class="se-right">
				<image class="se-right-left" @tap="changeList" :src="baseurl + '/accou/changelist.png'"></image>
				<view class="se-right-right" @tap="shaixaunOpen">
					<image class="se-right-image" :src="baseurl + '/accou/select.png'"></image>
					<view class="se-right-text">筛选</view>
				</view>
			</view>
		</view>
		<view scroll-y="true" class="ac-list" @scroll="scroll">
			<view class="ac-item" v-for="item in items" v-if="isList">
				<view class="ac-top">
					<view class="ac-top-left">
						{{item.price}}
					</view>
					<image :src="baseurl + '/home/ic_xian.png'" class="ac-top-right">

					</image>
				</view>
				<view class="ac-mid">
					<image class="ac-mid-1"
						:src="item.image">
					</image>
					<image @tap="openDelete(item.id)" class="ac-mid-2" :src="baseurl + '/accou/delete.png'"></image>

				</view>
				<view class="ac-bottom">
					{{item.desc}}
				</view>

			</view>
			<view class="ac-item-list" v-for="item in items" v-else>
				
				<view class="item-list-top">
					<view class="item item1">
						<text class="top">定金</text>
						<text class="bottom">¥888</text>
					</view>
					<view class="item item2">
						<text class="top">尾款</text>
						<text class="bottom">¥1888</text>
					</view>
					<view class="item item3">
						<text class="top">全款</text>
						<text class="bottom">¥2776</text>
					</view>
			
				</view>
				<view class="item-list-mid">
					<image class="image" :src="baseurl + '/home/home1.png'"></image>
					<view class="item-list-mid-right">
						<text class="up">PG studio火影冲阵系列-02我爱PG studio火影冲阵系列PG studi…</text>
						<text class="down">超豪华版</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="item-list-bottom">
					<view class="left">
						<text class="date">1974/01/07</text>
						<image class="ding" 
						:src="baseurl + '/home/ic_ding1.png'"
						></image>
					</view>
					<image @tap="openDelete(item.id)" class="right"
					:src="baseurl + '/accou/delete.png'"
					></image>
				</view>
			</view>
		</view>
		
		<!-- 添加 -->
		<view class="ac_add" @tap="goAdd">
			<image class="ac_add_image" :src="baseurl + '/accou/add.png'"></image>
			<view class="ac_add_text">添加</view>
		</view>
		
	</view>
	<view class="deletedialog" v-if="deletedialog">
		<text class="title">提示</text>
		<!-- {{selectItem}} -->
		<text class="content">你确定要删除“{{selectItem.name}}”吗？</text>
		<view class="bottom-button">
			<view class="play-button" @tap="claseDelete">
				取消
			</view>
			<view class="play-button" @tap="deleteact">
				删除
			</view>
		</view>
	</view>
	<view class="shuaixuandialog" v-if="shuaixuandialog">
		<view class="shai-top">
			<text class="title">筛选</text>
			<image @tap="close" :src="baseurl + '/mine/close.png'"></image>
		</view>
		<!-- 开订状态 -->
		<view class="open-staus">
			<text class="title">开订状态</text>
			<view class="content">
				<view class="button" @tap="zhuangtaiChange(0)" :class="{selectZt : zhuangtaiSelect === 0}">
					<text class="text">全部</text>
				</view>
				<view class="button" @tap="zhuangtaiChange(1)" :class="{selectZt : zhuangtaiSelect === 1}">
					<text class="text">已预定</text>
				</view>
				<view class="button" @tap="zhuangtaiChange(2)" :class="{selectZt : zhuangtaiSelect === 2}">
					<text class="text">已补款</text>
				</view>
				
			</view>
		</view>
		<!-- 常用IP -->
		<view class="item-ip">
			<text class="title">常用IP</text>
			<!-- :start="startDate" :end="endDate" -->
			<view class="content">
				<view class="button"  
				@tap="selectIp(item.id)"
				v-for="item in ips"
				:class="{ selectZt : item.select }">
					<text class="text">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 标签 -->
		<view class="item-ip bottom">
			<text class="title">标签</text>
			<!-- :start="startDate" :end="endDate" -->
			<view class="content">
				<view class="button"  
				@tap="selectTags(item.id)"
				v-for="item in tags"
				:class="{ selectZt : item.select }">
					<text class="text">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {baseUrl} from '@/setting/const.js';
	import {
		ref
	} from 'vue';
	const baseurl = ref(baseUrl)
	// 获取安全区域
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
	const safeTop = safeAreaInsets.top + 5
	// 跳转到添加
	const goAdd = ()=>{
		uni.navigateTo({
			url:'/pages/accounting/add'
		})
	}
	// 筛选
	const shuaixuandialog = ref(false)
	const shaixaunOpen = ()=>{
		shuaixuandialog.value = true
	}
	const close = ()=>{
		shuaixuandialog.value = false
	}
	// 展示的方式
	const isList = ref(false)
	// 切换展示的方式
	const changeList = ()=>{
		isList.value = !isList.value
	}
	
	// 展示列表
	const items = ref([
		{
			id:0,
			price:500,
			name:'Bt七五海女帝1',
			image:'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/58f6227f2a334b52a84a5caf63e40b3e_mergeImage.png',
			desc:'PG studio火影1...'
		},
		{
			id:1,
			price:500,
			name:'Bt七五海女帝',
			image:'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/58f6227f2a334b52a84a5caf63e40b3e_mergeImage.png',
			desc:'PG studio火影2...'
		},
		{
			id:2,
			price:500,
			name:'Bt七五海女帝',
			image:'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/58f6227f2a334b52a84a5caf63e40b3e_mergeImage.png',
			desc:'PG studio火影...'
		},
		{
			id:3,
			price:500,
			name:'Bt七五海女帝',
			image:'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/58f6227f2a334b52a84a5caf63e40b3e_mergeImage.png',
			desc:'PG studio火影...'
		},
		{
			id:4,
			price:500,
			name:'Bt七五海女帝',
			image:'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/58f6227f2a334b52a84a5caf63e40b3e_mergeImage.png',
			desc:'PG studio火影...'
		},
		{
			id:5,
			price:500,
			name:'Bt七五海女帝',
			image:'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/58f6227f2a334b52a84a5caf63e40b3e_mergeImage.png',
			desc:'PG studio火影...'
		}
	])
	// 选中删除的项目
	const selectItem = ref({})
	const deletedialog = ref(false)
	// 取消删除
	const claseDelete = ()=>{
		deletedialog.value = false
	}
	// 打开删除对话框
	const openDelete = (id)=>{
		selectItem.value = items.value[id]
		deletedialog.value = true
	}
	// 删除
	const deleteact = ()=>{
		console.log(selectItem.value.id)
		items.value =  items.value.filter((item)=>{
			return item.id !== selectItem.value.id
		})
		
		console.log(items.value);
		deletedialog.value = false
	}
	// 当前选中的类型
	const curryType = ref(0)
	// 点击切换类型
	const selectType = (e) => {
		console.log(e);
		curryType.value = e
		console.log(curryType.value);
	}
	
	const zhuangtaiSelect = ref(0)
	// 切换预定状态
	const zhuangtaiChange = (e)=>{
		zhuangtaiSelect.value = e
	}
	
	// 常用IP
	const ips = ref([
		{
			id:0,
			name:'海贼王',
			select:true
		},
		{
			id:1,
			name:'海贼王',
			select:false
		},
		{
			id:2,
			name:'海贼王',
			select:false
		},
		{
			id:3,
			name:'海贼王',
			select:false
		},
		{
			id:4,
			name:'海贼王',
			select:false
		},
		{
			id:5,
			name:'海贼王',
			select:false
		},
		{
			id:6,
			name:'海贼王',
			select:false
		},
	])
	const selectIp = (id)=>{
		console.log(id);
		ips.value[id].select = !ips.value[id].select
	}
	
	// tags
	const tags = ref([
		{
			id:0,
			name:'#海贼王',
			select:true
		},
		{
			id:1,
			name:'#火影忍者',
			select:false
		}
	])
	const selectTags = (id)=>{
		console.log(id);
		tags.value[id].select = !tags.value[id].select
	}
</script>

<style scoped lang="scss">
	@font-face {
		font-family: zihunbiantaoti;
		src: url('https://gitee.com/yxk756/mogu/raw/main/static/fonts/zihunbiantaoti.ttf');
	}

	.fog{
		background-color: RGBA(122, 122, 124, 0.5) !important;
		z-index: 2;
		width: 750rpx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}
	.container {
		box-sizing: border-box;
	}
	.bottom{
		margin-bottom: 44rpx;
	}
	
	.selectZt {
		// height: 300rpx !important;
		color: #222222 !important;
		
		background-color: rgba(255, 221, 26, 1) !important;
	}
	.shuaixuandialog{
		z-index: 3;
		box-sizing: border-box;
		position: fixed;
		width: 750rpx;
		// height: 768rpx;
		bottom: 0rpx;
		// padding-left: 12rpx;
		background: #FFFFFF;
		
		.button {
			margin-top: 20rpx;
			margin-left: 12rpx;
			width: 159rpx;
			height: 60rpx;
		
			border-radius: 30rpx;
			// margin-left: 30rpx;
			background-color: #F4F5F8;
			color: #0B0B0B;
			
			display: flex;
			justify-content: center;
			align-items: center;
			
			.text {
				// width: 72rpx;
				// height: 33rpx;
				// padding: 14rpx 26rpx 13rpx 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;
		
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
			}
		
		}
		.item-ip{
			margin-top: 40rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
			}
			.content{
				margin-left: 12rpx;
				box-sizing: border-box;
				// margin-top: 20rpx;
				// background: #F4F5F8;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				// padding-left: 21rpx;
				flex-wrap: wrap;
				.button{
					margin-left: 18rpx;
					margin-top: 20rpx;
				}
			}
		}
		
		// background-color: firebrick;
		.open-staus{
			margin-top: 40rpx;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
			}
			
			.content{
				display: flex;
				margin-left: 18rpx;
				
			}
		}
		.shai-top{
			display: flex;
			// background-color: rebeccapurple;
			align-items: center;
			justify-content: space-between;
			padding-right: 47rpx;
			margin-top: 40rpx;
			.title{
				width: 144rpx;
				height: 50rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #222222;
				line-height: 50rpx;
				// text-align: left;
				font-style: normal;
				background: #FFFFFF;
			}
			image{
				width: 26rpx;
				height: 26rpx;
			}
		}
	}
	
	.deletedialog{
		width: 620rpx;
		height: 322rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		// border: 1rpx solid #979797;
		position: fixed;
		left: 0;
		right: 0;
		top:0;
		bottom: 0rpx;
		margin:  auto;
		display: flex;
		flex-direction: column;
		.title{
			border-radius: 30rpx;
			padding-top: 43rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			// text-align: center;
			font-style: normal;
		}
		.content{
			padding-top: 37rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #666666;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
		}
		.bottom-button{
			display: flex;
			padding: 0 24rpx;
			:nth-child(2){
				// background-color: #000000 !important;
				margin-left: 20rpx;
			}
			:nth-child(1){
				color: rgba(151, 154, 158, 1) !important;
				background-color: #F4F5F9 !important;
				// margin-left: 20rpx;
			}
			.play-button {
				width: 276rpx;
				height: 90rpx;
				background: #FFDD1A;
				border-radius: 45rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				// margin: 0 auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				line-height: 45rpx;
				text-align: center;
				font-style: normal;
				margin-top: 50rpx;
				margin-bottom: 88rpx;
			}
		}
	}
	.ac_add{
		position: fixed;
		top: 1157rpx;
		right: 30rpx;
		border-radius: 50rpx;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: linear-gradient( 194deg, #FFEEA9 0%, #FFDF00 100%);
		.ac_add_image{
			width: 50rpx;
			height: 50rpx;
		}
		.ac_add_text{
			width: 40rpx;
			height: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #222222;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.select {
		// height: 300rpx !important;
		color: #FFFFFF !important;
		background-color: #000000 !important;
	}

	.ac-list {
		// width: 690rpx;
		margin: 0 12rpx;
		// margin-top: 20rpx;
		// background-color: #0B0B0B;
		// // padding: 0 30rpx;
		display: flex;
		flex-wrap: wrap;
		.ac-item-list{
			width: 690rpx;
			// height: 403rpx;
			background: #F4F5F8;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			padding-left: 30rpx;
			.item-list-top{
				// background-color: #000000;
				box-sizing: border-box;
				padding-top: 20rpx;
				display: flex;
				position: relative;
				// z-index: -1;
				min-height: 87rpx;
				.item{
					display: flex;
					flex-direction: column;
					.top{
				
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #979A9E;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
					}
					.bottom{
						// background-color: red;
						margin-top: 4rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 24rpx;
						color: #0B0B0B;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
					}
					// background-color: #FFDD1A;
				}
				.item1{
					// padding-left: 201rpx;
					position: absolute;
					left: 0;
				}
				.item2{
					position: absolute;
					left: 249rpx;
				}
				.item3{
					position: absolute;
					left: 498rpx;
				}
			}
			.item-list-mid{
				margin-top: 45rpx;
				box-sizing: border-box;
				display: flex;
				.image{
					flex-shrink: 0;
					width: 140rpx;
					height: 140rpx;
				}
				
				// 
				.item-list-mid-right{
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					
					.up{
						width: 470rpx;
						height: 84rpx;
						overflow: hidden;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #0B0B0B;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
					}
					.down{
						margin-top: 23rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #979A9E;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
					}
				}
				
			}
			.line{
				margin-top: 20rpx;
				border-top: 1rpx solid #EEEEEE;
			}
			.item-list-bottom{
					margin-top: 25rpx;
					margin-bottom: 25rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					// background-color: forestgreen;
					.left{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 24rpx;
						color: #222222;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						display: flex;
						// justify-content: space-between;
						align-items: center;
						.ding{
							width: 50rpx;
							height: 50rpx;
							margin-left: 20rpx;
						}
					}
					.right{
						width: 50rpx;
						height: 50rpx;
						margin-right: 30rpx;
					}
			}
		}
		.ac-item {
			box-sizing: border-box;
			margin-left: 18rpx;
			margin-top: 20rpx;
			width: 218rpx;
			height: 303rpx;
			// background-color: rebeccapurple;
			display: flex;
			padding: 0 10rpx;
			background: #F4F5F8;
			border-radius: 10rpx;

			flex-direction: column;

			.ac-bottom {
				padding: 10rpx;
				width: 198rpx;
				height: 33rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #0B0B0B;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
			}

			.ac-top {
				// box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx;

				.ac-top-left {
					width: 44rpx;
					height: 33rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #0B0B0B;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
				}

				.ac-top-right {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.ac-mid {
				width: 218rpx;
				height: 303rpx;
				// padding: 0 10rpx;
				position: relative;
				
				// background-color: forestgreen;
				width: 198rpx;
				height: 198rpx;

				.ac-mid-1 {
					// box-sizing: border-box;
					width: 198rpx;
					height: 198rpx;
					background: #D8D8D8;
					border-radius: 10rpx;
					border: 1rpx solid #979797;
				}

				.ac-mid-2 {
					position: absolute;
					bottom: 10rpx;
					right: 10rpx;
					width: 50rpx;
					height: 50rpx;
					// background: #D8D8D8;
					border-radius: 25rpx;
					// border: 1rpx solid #979797;
				}
			}
		}
	}

	.se {
		box-sizing: border-box;
		width: 750rpx;
		height: 60rpx;
		margin-top: 20rpx;
		padding-left: 10rpx;
		// padding-right: 130rpx;
		// background-color: forestgreen;
		display: flex;
		align-items: center;
		// justify-content: space-between;

		.se-left {
			display: flex;

			.button {
				width: 124rpx;
				height: 60rpx;
				background: #F4F5F8;
				border-radius: 30rpx;
				margin-left: 20rpx;

				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #0B0B0B;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.se-right {
			margin-left: 130rpx;
			// background-color: red;
			width: 150.25rpx;
			display: flex;
			margin-right: 30rpx;
			align-items: center;
			// justify-content: space-between;
			height: 60rpx;

			.se-right-left {
				width: 30rpx;
				height: 30rpx;
				// background: #333333;
			}

			.se-right-right {
				margin-left: 30rpx;
				// background-color: darkblue;
				display: flex;
				align-items: center;

				// justify-content: space-between;
				// background-color: firebrick;
				.se-right-image {
					width: 30rpx;
					height: 30rpx;
				}

				.se-right-text {
					margin-left: 6rpx;
					width: 56rpx;
					height: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #0B0B0B;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}

	.title {
		box-sizing: border-box;
		// width: 750rpx;
		height: 61rpx;
		background: #FFFFFF;
		// background-color: red;
		padding-left: 30rpx;
		display: flex;
		align-items: center;

		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #000000;
		line-height: 50rpx;
		text-align: left;
		font-style: normal;
	}

	.zichan {
		box-sizing: border-box;
		width: 750rpx;
		height: 212rpx;
		margin-top: 25rpx;
		padding-left: 30rpx;

		.zi-view {
			position: relative;
			width: 690rpx;
			height: 212rpx;
			background-size: 100%;
			background-image: url('http://8.137.80.244/mogu/accou/zichan.png');

			.zi-title {
				position: absolute;
				top: 47rpx;
				left: 30rpx;
				width: 168rpx;
				height: 33rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
			}

			.zi-all {
				// background-color: rebeccapurple;
				display: flex;
				position: absolute;
				height: 74rpx;
				top: 90rpx;
				left: 30rpx;
				font-family: zihunbiantaoti;
				// margin-top: 10rpx;
				color: #222222;

				text-align: center;
				font-style: normal;

				.zi-flag {
					// background-color: rebeccapurple;
					font-size: 42rpx;
					// line-height: 42rpx;
					display: flex;
					align-items: flex-end;
				}

				.zi-num {
					// background-color: red;
					display: flex;
					align-items: flex-end;
					font-size: 62rpx;
					line-height: 50rpx;
				}
			}
		}

	}
</style>